<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/leader/notices'}">学院领导</el-breadcrumb-item>
      <el-breadcrumb-item>审核请求处理</el-breadcrumb-item>
      <el-breadcrumb-item>课题申报审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--表格区域-->
      <el-table :data="checkSubjectList" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="课题题目" prop="sub.name" width="300"></el-table-column>
        <el-table-column align="center" label="课题类型" >
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报时间" prop="sub.declareTime">
          <template slot-scope="scope"> 
            <span>{{$moment(scope.row.sub.declareTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报人">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看简介/审核">
          <template slot-scope="scope">
            <el-popover placement="top" :title="scope.row.sub.name + '--课题简介'" width="300" trigger="click" :content="scope.row.sub.introduce">
              <el-button slot="reference" circle icon="el-icon-view"></el-button>
            </el-popover>  
            <el-button style="margin-left:20px" type="warning" circle icon="el-icon-circle-check" @click="showCheckDialog(scope.row.sub.id)"></el-button>
          </template> 
        </el-table-column> 
      </el-table> 
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    <!-- 审核课题申报对话框 -->
    <el-dialog title="审核课题申报" :visible.sync="dialogVisible" width="600px" @close="checkParams = {}">
      <el-form ref="checkFormRef" :rules="formRules" label-width="120px" :model="checkParams">
        <el-form-item label="审核结果" prop="status">
          <el-select v-model="checkParams.status" placeholder="请选择审核结果"> 
            <el-option :value="2" label="审核不通过"></el-option>
            <el-option :value="3" label="审核通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="checkAdvice">
          <el-input v-model="checkParams.checkAdvice" type="textarea" :rows="5" style="width: 50%"></el-input>
          <el-button type="primary" round style="margin-left: 15%;" @click="submitCheckSubject('checkFormRef')">提交审核</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>  
  </div>
</template>

<script>
  import {getLeaderCheckSubjectList, checkSubjectById, getLeaderCheckSubjectTotal} from '../../axios/subject'
  export default {
    name: 'LeaderCheckSubject',
    data(){
      return {
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有可选的课题列表的总数  
        dialogVisible: false, // 控制审核对话框的 显示/隐藏
        formRules: {
          status: [ { required: true, message: '请选择审核结果', trigger: 'change' } ],
          checkAdvice: [ { required: true, message: '请输入审核意见', trigger: 'blur' } ]
        },
        checkParams:{
          id: 0,
          status: 2,
          checkAdvice: ''
        },
        checkSubjectList: [], // 需要审核的课题列表
      }
    },
    created(){
      this.getCheckSubjectList()
      this.getCheckSubjectTotal() 
    },
    methods: {
      getCheckSubjectTotal(){
        getLeaderCheckSubjectTotal().then(res => {
          if(res.success){
            this.total = res.data
          }
        }) 
      },
      // 获取需要审核的课题列表
      getCheckSubjectList(){
        // 向后端发送请求，获取需要审核的课题列表
        getLeaderCheckSubjectList(this.pageParam).then(res => {
          if(res.success){
            this.checkSubjectList = res.data
          } 
        }) 
        // 无后端，模拟数据
        // this.checkSubjectList = [
        //   {
        //     stu: {id: 6109118001, name: '张三'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
        //     sub: { // 对应毕设课题
        //           id: 1,
        //           name: '前端模拟数据测试',
        //           introduce: '测试测试测试测试测试测试',
        //           declareTime: '2021-01-21',
        //           source: {id: 1, label: '学生自拟'},
        //           type: {id: 1, label: '理论研究'},
        //           status: 1,
        //           stuId: 6109118001, 
        //           teaId: 610911, 
        //         } 
        //   }
        // ]
      },
      // 展示 审核申报课题对话框
      showCheckDialog(subId){ 
        this.checkParams.id = subId
        this.dialogVisible = true
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCheckSubjectList()  
      },
      submitCheckSubject(checkFormRef){
        console.log(this.checkParams)
        this.$refs[checkFormRef].validate(valid =>{ 
          if(valid){
            console.log(valid)
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 此时发送后端请求，保存审核信息
              checkSubjectById(this.checkParams.id, this.checkParams.status, this.checkParams.checkAdvice).then(res => {
                if(res.success){
                  this.$message.success('审核成功!')
                  this.dialogVisible = false
                  this.pageParam.currentPage = 1
                  this.getCheckSubjectTotal()
                  this.getCheckSubjectList()
                  
                } 
              }) 
            }).catch(() => {
              this.$message.success('已取消提交!')
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      }
    }
  }
</script>

<style>

</style>